<template>
    <div class="center">
        
        <h1 style="margin-left: 50%;">元艺Art公告</h1>
        <!-- <div style="margin-left: 20%; margin-top: 80px;  font-size: 36px;">
            <span @click="qb">全部</span>·
            <span @click="sx">上新公告</span>·
            <span @click="hd">活动公告</span>·
            <span @click="cq">澄清公告</span>·
            <span @click="pt">平台公告</span>
        </div> -->
        <div style=" margin-top: 80px; " >
            <el-tabs v-model="activeName" class="demo-tabs" @tab-click="handleClick" >
    <el-tab-pane label="全部"  >全部</el-tab-pane>
    <el-tab-pane label="上新公告" class="fontClass" >上新公告</el-tab-pane>
    <el-tab-pane label="活动公告" >活动公告</el-tab-pane>
    <el-tab-pane label="澄清公告" >澄清公告</el-tab-pane>
    <el-tab-pane label="平台公告" >平台公告</el-tab-pane>
  </el-tabs>
        </div>
       
        <div class="gg">
            <div v-for="item in list" class="jtgg">
         <h1 style="display: inline-block;">{{item.title}}</h1> {{item.content}}
            </div>


        </div>


        
    </div>
</template>

<script>
export default {
    name: 'Bulletin',

    data() {
        return {
            a:4,
            list:[],
            
        };
    },

    mounted() {
        this.cx();
    },

    methods: {
        
        cx(){
            this.$http.get('/BoticeServlet/show?type='+this.a)
            .then((result) => {
                // console.log(result);
                this.list=result.data;
                // console.log(this.list);
            }).catch((err) => {
                
            });
        },
        handleClick(a){
            console.log(a.props.label);
            if(a.props.label=='上新公告'){
                this.a=0;
            this.cx();
            }
            else if(a.props.label=='活动公告'){
                this.a=1;
            this.cx();
            }
            else if(a.props.label=='澄清公告'){
                this.a=2;
            this.cx();
            }
            else if(a.props.label=='平台公告'){
                this.a=3;
                this.cx();
            }
            else if(a.props.label=='全部'){
                this.a=4;
                this.cx();
            }
        },
        
    },
};
</script>

<style lang="css" scoped>
.jtgg:hover{
    background-color: rgb(245, 248, 247);
}
.demo-tabs{
    padding: 56px;
  color: #6b778c;
  font-size: 32px;
  font-weight: 600;
}



/deep/.demo-tabs .el-tabs__item{
font-size: 40px !important;
}
</style>